<template>
  <card ref="Card">
    <div slot="header">
      <row-col>
        <el-input type="textarea" v-model="searchNumber"/>
        <el-button slot="r" type="success" @click="getOperation" class="ml-10">搜索</el-button>
      </row-col>
    </div>
    <div class="logistics-query-msg" v-if="formData.length === 0">
      {{msg}}
    </div>
    <div v-else>
      <el-row :gutter="10" type="flex" style="flex-wrap: wrap;">
        <el-col :span="8" v-for="item in formData" :key="item.number" class="mb-10" style="max-height: 1000px;overflow-y: auto;overflow-x: hidden;">
          <box :response="item"/>
        </el-col>
      </el-row>
    </div>
  </card>
</template>

<script>
  import {listOperationApi} from "@/api/operation";
  import Box from './box'

  export default {
    name: "LogisticsQuery",
    components: {Box},
    data() {
      return {
        searchNumber: '',
        formData: [],
        msg: '输入搜索单号'
      }
    },
    methods: {
      getOperation() {
        let numbers = this.getString(this.searchNumber)
        if (!numbers) {
          this.$warnMsg('请输入单号')
          return;
        }
        this.formData = []
        this.$refs.Card.start()
        listOperationApi({numbers: numbers}).then(result => {
          this.$refs.Card.stop()
          this.formData = result.resultParam.map
          let errorNumber = result.resultParam.errorNumber
          if (this.formData.length === 0) {
            this.msg = '查不到单号'
            return
          }
          if (errorNumber.length > 0) {
            this.$errorMsg(`单号 ${errorNumber.join(' ')} 找不到`)
          }
        }).catch(() => {
          this.msg = '查找失败'
          this.$refs.Card.stop()
        })
      },
      getString(value) {
        let list = [];
        value = value.split('\n');
        value.forEach(item => { // 去空格
          item = item.trim();
          if (item !== '') list.push(item)
        });
        for (let i = 0; i < list.length; i++) { // 去重
          for (let j = i + 1; j < list.length; j++) {
            if (list[i] === list[j]) {
              list.splice(j, 1);
              j--;
            }
          }
        }
        return list.join(',')
      }
    }
  }
</script>

<style scoped>
  .logistics-query-msg {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px
  }
</style>
